import React, { useState } from 'react';
import './style.css';

const ExpandableSidebar: React.FC = () => {
  const [query, setQuery] = useState<string>('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };

  const handleSearch = () => {
    // 在这里可以处理搜索逻辑
    console.log(`搜索内容: ${query}`);
  };

  return (
    <div className="search-bar">
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="搜索内容"
        className="search-input"
      />
      <button onClick={handleSearch} className="search-button">
        搜索
      </button>
    </div>
  );
};

export default ExpandableSidebar;